<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <#include "/inc2/resource.ftl">
    <style>
    	html,body { height:100%; margin:0; }
    	.module-item{
    		width: 200px;
		    height: 200px;
		    #border: 0.1px solid peachpuff;
		    border-radius: 10px;
		    text-align: center;
		    line-height: 200px;
		    display: inline-block;
		    
		    background-image: url(/assets/board/left1.png);
		    background-size: contain;
		    background-repeat: no-repeat;
		    background-position: center;
		    text-align: left;
		    margin: 0px 14px;
		    position: relative;
    	}
    	.bg{
    		background-image: url(/assets/board/bg-1.png);
		    background-size: contain;
		    background-repeat: repeat;
		    height: 100%;
		    background-position: center;
    	}
    	.bg2{
    		background-image: url(/assets/board/bg-2.png);
		    background-size: contain;
		    background-repeat: no-repeat;
		    height: 100%;
		    background-position: center;
		    margin-left: auto;
		    margin-right: auto;
		    width: 926px;
    	}
    	a{
    		color:white;
   		    position: absolute;
		    bottom: 22px;
		    width: 100%;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    margin-left: 0px;
		    font-size: 18px;
    	}
    	.item-img{
    		width: 200px;
    		height: 200px;
    	}
    </style>
</head>
<body class="layui-layout-body">
<div class="bg">
	<div class="bg2">
		<div style="padding-top: 170px;">
		<#list items as item>
			<div class="module-item" id="module-item-1" style="background-image: url(/assets/board/${item.labelTxt}.png);">
				<a href="/frame/index?group=${item.name}&menu=${item.targetUrl}" target="_blank">${item.labelTxt}</a>
			</div>
		</#list>
		</div>
	</div>
	
</div>

<script type="text/javascript">
$(function(){
});
</script>
</body>
</html>
